<div class="tab-content container-fluid">
     
    <!-- Spirits -->
    <div class="row tab-pane list-group fade in active" id="spirits">
        <div class="col-md-12 list-group-item">
            <div class="row">
                <div class="col-md-2">
                    <a href="<?php echo base_url('ingredient/details/1'); ?>"> 
                        <img class="thumbnail nomargin" data-src="holder.js/100x100/#000:#fff">
                    </a>
                </div>
                <div class="col-md-10">
                    <h4 class="list-group-item-heading">Rum</h4>
                    <p class="list-group-item-text">
                        Rum is a distilled alcoholic beverage made from sugarcane byproducts, 
                        such as molasses, or directly from sugarcane juice, by a process of 
                        fermentation and distillation. The distillate, a clear liquid, is 
                        then usually aged in oak barrels. <br>
                        <a href="http://en.wikipedia.org/wiki/Rum"><span class="glyphicon glyphicon-globe"></span>Wikipedia</a>
                    </p>
                    <span>
                        Variations: 
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">white</a>
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">dark</a>
                    </span>
                </div> 
            </div>
        </div>
        <div class="col-md-12 list-group-item">
            <div class="row">
                <div class="col-md-2">
                    <a href="<?php echo base_url('ingredient/details/2'); ?>"> 
                        <img class="thumbnail nomargin" data-src="holder.js/100x100/#000:#fff">
                    </a>
                </div>
                <div class="col-md-10">
                    <h4 class="list-group-item-heading">Tequila</h4>
                    <p class="list-group-item-text">
                        Tequila is a distilled beverage made from the blue agave plant, 
                        primarily in the area surrounding the city of Tequila, 65 km (40 mi) 
                        northwest of Guadalajara, and in the highlands (Los Altos) of 
                        the north western Mexican state of Jalisco.   <br>        
                        <a href="http://en.wikipedia.org/wiki/Tequila"><span class="glyphicon glyphicon-globe"></span>Wikipedia</a>
                    </p>
                    <span>
                        Variations: 
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">silver</a>
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">gold</a>
                    </span>
                </div> 
            </div>
        </div>
        <div class="col-md-12 list-group-item">
            <div class="row">
                <div class="col-md-2">
                    <a href="<?php echo base_url('ingredient/details/2'); ?>"> 
                        <img class="thumbnail nomargin" data-src="holder.js/100x100/#000:#fff">
                    </a>
                </div>
                <div class="col-md-10">
                    <h4 class="list-group-item-heading">Vodka</h4>
                    <p class="list-group-item-text">
                        Vodka is a distilled beverage composed primarily of water and ethanol, 
                        sometimes with traces of impurities and flavorings. Vodka is made by 
                        the distillation of fermented substances such as grains, potatoes, 
                        or sometimes fruits or sugar.   <br>     
                        <a href="http://en.wikipedia.org/wiki/Vodka"><span class="glyphicon glyphicon-globe"></span>Wikipedia</a>
                    </p>
                    <span>
                        Variations: 
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">pure</a>
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">flavoured</a>
                    </span>
                </div> 
            </div>
        </div>
    </div>

    <!-- Liquor -->
    <div class="row tab-pane list-group fade in" id="liquors">
        <div class="col-md-12 list-group-item">
            <div class="row">
                <div class="col-md-2">
                    <a href="<?php echo base_url('ingredient/details/1'); ?>"> 
                        <img class="thumbnail nomargin" data-src="holder.js/100x100/#000:#fff">
                    </a>
                </div>
                <div class="col-md-10">
                    <h4 class="list-group-item-heading">Placeholder</h4>
                    <p class="list-group-item-text">
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholder<br>
                        <a href="http://en.wikipedia.org/wiki/Rum"><span class="glyphicon glyphicon-globe"></span>Wikipedia</a>
                    </p>
                    <span>
                        Variations: 
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">white</a>
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">dark</a>
                    </span>
                </div> 
            </div>
        </div>
    </div>
    
    <!-- Sirups -->
    <div class="row tab-pane list-group fade in" id="sirups">
        <div class="col-md-12 list-group-item">
            <div class="row">
                <div class="col-md-2">
                    <a href="<?php echo base_url('ingredient/details/1'); ?>"> 
                        <img class="thumbnail nomargin" data-src="holder.js/100x100/#000:#fff">
                    </a>
                </div>
                <div class="col-md-10">
                    <h4 class="list-group-item-heading">Placeholder</h4>
                    <p class="list-group-item-text">
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholder<br>
                        <a href="http://en.wikipedia.org/wiki/Rum"><span class="glyphicon glyphicon-globe"></span>Wikipedia</a>
                    </p>
                    <span>
                        Variations: 
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">white</a>
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">dark</a>
                    </span>
                </div> 
            </div>
        </div>
    </div>
    
    <!-- Juices -->
    <div class="row tab-pane list-group fade in" id="juice">
        <div class="col-md-12 list-group-item">
            <div class="row">
                <div class="col-md-2">
                    <a href="<?php echo base_url('ingredient/details/1'); ?>"> 
                        <img class="thumbnail nomargin" data-src="holder.js/100x100/#000:#fff">
                    </a>
                </div>
                <div class="col-md-10">
                    <h4 class="list-group-item-heading">Placeholder</h4>
                    <p class="list-group-item-text">
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholder<br>
                        <a href="http://en.wikipedia.org/wiki/Rum"><span class="glyphicon glyphicon-globe"></span>Wikipedia</a>
                    </p>
                    <span>
                        Variations: 
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">white</a>
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">dark</a>
                    </span>
                </div> 
            </div>
        </div>
    </div>
    
    <!-- Tools -->
    <div class="row tab-pane list-group fade in" id="tools">
        <div class="col-md-12 list-group-item">
            <div class="row">
                <div class="col-md-2">
                    <a href="<?php echo base_url('ingredient/details/1'); ?>"> 
                        <img class="thumbnail nomargin" data-src="holder.js/100x100/#000:#fff">
                    </a>
                </div>
                <div class="col-md-10">
                    <h4 class="list-group-item-heading">Placeholder</h4>
                    <p class="list-group-item-text">
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholder<br>
                        <a href="http://en.wikipedia.org/wiki/Rum"><span class="glyphicon glyphicon-globe"></span>Wikipedia</a>
                    </p>
                    <span>
                        Variations: 
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">white</a>
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">dark</a>
                    </span>
                </div> 
            </div>
        </div>
    </div>
    
    <!-- Glasses -->
    <div class="row tab-pane list-group fade in" id="glasses">
        <div class="col-md-12 list-group-item">
            <div class="row">
                <div class="col-md-2">
                    <a href="<?php echo base_url('ingredient/details/1'); ?>"> 
                        <img class="thumbnail nomargin" data-src="holder.js/100x100/#000:#fff">
                    </a>
                </div>
                <div class="col-md-10">
                    <h4 class="list-group-item-heading">Placeholder</h4>
                    <p class="list-group-item-text">
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholderPlaceholderPlaceholder
                        PlaceholderPlaceholder<br>
                        <a href="http://en.wikipedia.org/wiki/Rum"><span class="glyphicon glyphicon-globe"></span>Wikipedia</a>
                    </p>
                    <span>
                        Variations: 
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">white</a>
                            <a href="<?php echo base_url('ingredient/info/1'); ?>" class="label label-info">dark</a>
                    </span>
                </div> 
            </div>
        </div>
    </div>
    
</div>